<template>
	<view class="wish-pool-container">
		<form @submit="formSubmit" @reset="formReset" class="form-container">
			<view class="form-top">
				<view class="form-item">
					<image src="/static/wish_pool_icons/user.png" class="icon"></image>
					<text class="name">姓名</text>
					<input class="form-input" name="input" type="number" placeholder="请输入姓名" />
				</view>
				<view class="form-item">
					<image src="/static/wish_pool_icons/phone.png" class="icon"></image>
					<text class="name">联系方式</text>
					<input class="form-input" name="input" placeholder="请输入联系方式" />
				</view>
				<view class="form-item">
					<image src="/static/wish_pool_icons/address.png" class="icon"></image>
					<text class="name">所在地</text>
					<picker mode="region" @change="regionPicker" value="region" class="region-picker">
						<view style="font-size: 30rpx ;color: #999999;">
							{{region[0]}} {{region[1]}} {{region[2]}}
						</view>
					</picker>
				</view>
			</view>
			<view class="form-buttom">
				<advanced-lable :content=dynamicLable class="lable"></advanced-lable>
				<checkbox-group class="checkout-group" @change='checkOther'>
					<view class="top">
						<checkbox value="0">
							<text>房屋验房</text>
						</checkbox>
						<checkbox value="1">
							<text>房屋改造或维修</text>
						</checkbox>
					</view>
					<view class="buttom">
						<checkbox value="2">
							<text>房屋验房</text>
						</checkbox>
						<checkbox value="3">
							<text>其他</text>
						</checkbox>
					</view>
				</checkbox-group>
				<view class="slot" v-show="showOther">
					<textarea value="" placeholder="请输入需求" />
				</view>
				<view class="need">
					<text class="name">{{dynamicTitle}}</text>
					<picker class="date-picker" mode="date" value="date" @change="datePicker">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<view class="form-sumbit">
				<button class="form-btn" form-type="submit" @click="submitForm()">提交</button>
			</view>
		</form>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				dynamicLable: '需求',
				dynamicTitle: '需求时间',
				showOther: false,
				date: '请选择时间',
				region: ['请选择地址', '', '']
			};
		},
		methods: {
			checkOther: function(e) {
				let values = e.detail.value
				console.log(values)
				if (values.includes('3')) {
					this.showOther = true
				} else {
					this.showOther = false
				}

			},
			datePicker: function(e) {
				this.date = e.detail.value
				console.log(e.detail)
			},
			regionPicker: function(e) {
				this.region = e.detail.value
				console.log(this.region)
			},
			submitForm() {
				uni.navigateTo({
					url: '/otherpkg/success_page/success_page'
				})
			}
		}
	}
</script>

<style lang="scss">
	.wish-pool-container {
		.form-container {
			display: flex;
			flex-direction: column;

			.form-top {
				background: #FFFFFF;
				margin: 40rpx 30rpx 20rpx 30rpx;
				border-radius: 10rpx;
				border: 1rpx solid #EBEEF5;

				.form-item {
					display: flex;
					flex-direction: row;
					border-bottom: 1rpx solid #EBEEF5;
					align-items: center;
					height: 100rpx;

					.icon {
						margin-left: 20rpx;
						width: 28rpx;
						height: 32rpx;
					}

					.name {
						margin-left: 20rpx;
						color: #333333;
						font-size: 28rpx;
					}

					.form-input {
						text-align: right;
					}

					.region-picker {
						margin-left: 150rpx;
					}
				}
			}

			.form-buttom {
				display: flex;
				flex-direction: column;
				background: #FFFFFF;
				margin: 40rpx 30rpx 20rpx 30rpx;
				border-radius: 10rpx;
				border: 1rpx solid #EBEEF5;

				.lable {
					margin-top: 20rpx;
				}

				.checkout-group {
					checkbox {
						width: 50%;

						text {
							margin-left: 20rpx;
							font-size: 28rpx;
							color: #333333;
						}
					}

					padding:30rpx 20rpx;

					.buttom {
						margin-top: 30rpx;
					}
				}

				.need {
					padding-left: 10rpx;
					padding-right: 80rpx;
					height: 80rpx;
					display: flex;
					flex-direction: row;
					margin-left: 10rpx;
					justify-content: space-between;
				}

				.slot {
					margin-left: 20rpx;
				}
			}

			.form-sumbit {
				.form-btn {
					margin: 120rpx 30rpx 0 30rpx;
					background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
					border-radius: 44rpx;
				}

				color: #FFFFFF;

			}
		}
	}
</style>
